<template>
  <div class="login">
    <div class="login-content">
      <figure class="login-figure">
        <img :src="logo" class="logo-img" alt />
        <div class="main-pic-box">
          <img :src="bg" alt />
        </div>
      </figure>
      <main class="login-main">
        <div class="plate-title">欢迎使用问卷系统</div>
        <div class="plate-body">
          <a-form-model
            ref="loginFormRef"
            prefix
            class="form-login"
            :model="loginForm"
            :rules="rules"
          >
            <a-form-model-item prop="username">
              <a-input placeholder="请输入登录账号" v-model="loginForm.username">
                <a-icon slot="prefix" type="user" />
              </a-input>
            </a-form-model-item>

            <a-form-model-item prop="password">
              <a-input placeholder="请输入登录密码" v-model="loginForm.password">
                <a-icon slot="prefix" type="lock" />
              </a-input>
            </a-form-model-item>
            <slot></slot>
            <a-form-model-item>
              <a-checkbox v-model="remember">记住密码</a-checkbox>
            </a-form-model-item>
            <a-form-model-item class="btn-form-item">
              <a-button type="primary" class="login-btn" @click="onLogin" :disabled="allowLogin">登 录</a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </main>
    </div>
  </div>
</template>
<script>
import logo from "../assets/images/logo.png";
import bg from "../assets/images/login-plate.png";
import { login } from "../api/user.js";
import { setRemPass, getRemPass, setUser } from "@/libs/util";

export default {
  name: "login",

  data() {
    return {
      allowLogin: false, // 是否允许登录请求
      logo: "",
      bg: "",
      loginForm: {
        username: "admin",
        password: "123456"
      },
      remember: false, // 是否记住密码
      cfg: {
        title: "问卷管理", // 系统名称
        logoUrl: "", // logo图片地址
        mainUrl: "", // 登录页主图
        bgColor: "#3170F3", // 主背景色
        targetPath: "", // 登录成功后跳转的页面
        isToken: false // 是否请求携带token
      },
      ruleForm: "",
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.logo = this.cfg.logoUrl ? this.cfg.logoUrl : logo;
    this.bg = this.cfg.mainUrl ? this.cfg.mainUrl : bg;
  },
  mounted() {
    let data = getRemPass();
    if (data) {
      this.remember = true;
      this.loginForm = data;
    }
  },
  methods: {
    onLogin() {
      console.log(process.env.VUE_APP_BASEURL);
      console.log(this.loginForm);
      this.$refs.loginFormRef.validate(async valid => {
        if (valid) {
          if (this.remember) {
            setRemPass(this.loginForm);
          }
          const { data } = await login(this.loginForm);
          console.log("suceess", data);
          if (data.meta.status !== 200) {
            this.$message.error(data.meta.msg);
          } else {
            this.$message.success(data.meta.msg);
            // window.sessionStorage.setItem("token", data.data.token);
            setUser(data.data.token);
            this.$router.push("/home");
          }
        }
      });
    }

    // 登录接口
    // async login(prams) {
    //   const { success, error } = await login(
    //     Object.assign({}, prams, {
    //       cgi: this.cfg.loginCgi,
    //       loginCgiKeyMap: this.cfg.loginCgiKeyMap
    //     })
    //   );
    //   this.allowLogin = true;
    //   if (success) {
    //     if (this.cfg.isToken) {
    //       // 设置全局token配置
    //       let token = success.token || "";
    //       http.setConfig("token", `Bearer ${token}`);
    //     }
    //     // 选择记住密码
    //     if (prams.remember) {
    //       localStorage.setItem(
    //         this.loginCgiKey.username,
    //         prams[this.loginCgiKey.username]
    //       );
    //       localStorage.setItem(
    //         this.loginCgiKey.password,
    //         prams[this.loginCgiKey.password]
    //       );
    //     } else {
    //       localStorage.setItem(this.loginCgiKey.username, "");
    //       localStorage.setItem(this.loginCgiKey.password, "");
    //     }
    //     this.$message.success("登录成功");
    //     // 传返回结果给父组件
    //     setTimeout(() => {
    //       this.cfg.nextName && this.$router.push({ name: this.cfg.nextName });
    //       this.cfg.targetPath && this.$router.push(this.cfg.targetPath);
    //       this.allowLogin = false;
    //       this.$emit("loginSuccess", success); //时延后再触发，利于后续route相关判断，TODO 消除时延
    //     }, 1000);
    //   }
    //   if (error) {
    //     this.$emit("error", error);
    //     this.$message.error(error.message || error.msg);
    //     this.allowLogin = false;
    //   }
    // }
  }
};
</script>
<style scoped>
.login {
  height: 100%;
  background: #3170f3;
}
/* 大于1100px */

.login-content {
  width: 848px;
  height: 424px;
}
.login-figure {
  width: 480px;
}
.login-figure .main-pic-box {
  left: 65px;
  top: 99px;
  width: 395px;
  height: 245px;
}
.login-figure .logo-img {
  margin: 31px 0 0 38px;
  width: 68px;
  height: 26px;
}
.login-main {
  width: 367px;
  padding: 57px 63px 0;
  display: flex;
  flex-direction: column;
}
.plate-title {
  font-size: 18px;
  /* margin-bottom: 67px; */
}
.plate-body {
  display: flex;
  flex: 1;
  align-items: center;
}
.form-login {
  width: 100%;
}
.ant-input,
.login-btn {
  height: 39px;
  line-height: 39px;
  font-size: 15px;
}
.btn-form-item {
  padding-top: 8px;
  margin-bottom: 0;
}
.login-btn {
  border-radius: 20px;
}

@media (min-width: 1280px) {
  .login-content {
    width: 987px;
    height: 493px;
  }
  .login-figure {
    width: 559px;
  }
  .login-figure .main-pic-box {
    left: 75px;
    top: 115px;
    width: 460px;
    height: 285px;
  }
  .login-figure .logo-img {
    margin: 36px 0 0 44px;
    width: 79px;
    height: 31px;
  }
  .login-main {
    width: 427px;
    padding: 66px 73px 0;
  }
  .plate-title {
    font-size: 21px;
    margin-bottom: 81px;
  }
  .ant-input,
  .login-btn {
    height: 45px;
    line-height: 45px;
    font-size: 18px;
  }
  .btn-form-item {
    padding-top: 13px;
    margin-bottom: 0;
  }
  .login-btn {
    border-radius: 23px;
  }
}
/* 大于1366设备 */
@media (min-width: 1366px) {
  .login-content {
    width: 1053px;
    height: 526px;
  }
  .login-figure {
    width: 597px;
  }
  .login-figure .main-pic-box {
    left: 80px;
    top: 123px;
    width: 472px;
    height: 305px;
  }
  .login-figure .logo-img {
    margin: 38px 0 0 47px;
    width: 85px;
    height: 33px;
  }
  .login-main {
    width: 456px;
    padding: 70px 78px 0;
  }
  .plate-title {
    font-size: 23px;
    margin-bottom: 88px;
  }
  .ant-input,
  .login-btn {
    height: 48px;
    line-height: 48px;
    font-size: 18px;
  }
  .btn-form-item {
    padding-top: 14px;
    margin-bottom: 0;
  }
  .login-btn {
    border-radius: 24px;
  }
}
/* 大于1440px设备 */
@media (min-width: 1440px) {
  .login-content {
    width: 1110px;
    height: 555px;
  }
  .login-figure {
    width: 629px;
  }
  .login-figure .main-pic-box {
    left: 85px;
    top: 130px;
    width: 517px;
    height: 321px;
  }
  .login-figure .logo-img {
    margin: 41px 0 0 50px;
    width: 89px;
    height: 35px;
  }
  .login-main {
    width: 481px;
    padding: 74px 83px 0;
  }
  .plate-title {
    font-size: 24px;
    margin-bottom: 94px;
  }
  .ant-input,
  .login-btn {
    height: 48px;
    line-height: 48px;
    font-size: 18px;
  }
  .btn-form-item {
    padding-top: 17px;
    margin-bottom: 0;
  }
  .login-btn {
    border-radius: 26px;
  }
}
/* 大于1680设备 */
@media (min-width: 1680px) {
  .login-content {
    width: 1480px;
    height: 740px;
  }
  .login-figure {
    width: 840px;
  }
  .login-figure .main-pic-box {
    left: 113px;
    top: 173px;
    width: 689px;
    height: 428px;
  }
  .login-figure .logo-img {
    margin: 54px 0 0 66px;
    width: 104px;
    height: 40px;
  }
  .login-main {
    width: 640px;
    padding: 100px 110px 0;
  }
  .plate-title {
    font-size: 32px;
    margin-bottom: 132px;
  }
  .ant-input,
  .login-btn {
    height: 48px;
    line-height: 48px;
    font-size: 18px;
  }
  .btn-form-item {
    padding-top: 31px;
    margin-bottom: 0;
  }
  .login-btn {
    border-radius: 34px;
  }
}
/* 默认 */
.login-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  display: flex;
}
.login-figure {
  float: left;
  background: #4583fe;
  position: relative;
  border-radius: 10px 0 0 10px;
  margin-bottom: 0;
}
.login-figure .main-pic-box {
  position: absolute;
}
.login-figure .main-pic-box img {
  width: 100%;
  height: 100%;
}
.login-main {
  float: left;
}
.plate-title {
  color: #222;
  font-weight: bold;
  text-align: center;
}
.ant-input {
  border: 0;
  border-bottom: 1px solid #d8d8d8;
  border-radius: 0;
  background: #fff;
  font-size: 16px;
}
.ant-input:focus {
  box-shadow: none;
}
.ant-input,
.login-btn {
  width: 100%;
}
</style>
